<template>
    <div id="templateDiv">
        <Spin size="large" fix v-if="Loading"></Spin>
        <Form :label-width="130" inline>
            <Row>
                <Form-item label="属地区划:">
                    <area-linkage :areaCode.sync="param.ssca0043"></area-linkage>
                </Form-item>
                <Form-item label="统计年度:">
                    <DatePicker type="year" v-model="param.year" style="width: 200px"  :editable="false"></DatePicker>
                </Form-item>
            </Row>
            <Row class="button_row">
                <span style="float: right">
                     <Button type="primary" @click="monitorProcessChart">查询</Button>
                     <Button type="primary" class="button_item_left" @click="searchReset">重置</Button>
                 </span>
            </Row>
        </Form>
        <div id="chart">
            <lines ref="lines"
                   :seriesData="series" :xAxisData="data"
                   style="width: 100%;" :title="text"
                   :height="height"></lines>
        </div>
    </div>
</template>

<script>
    import {Lines} from '@/views/common/echarts'
    import {postAction} from '@/api/request'

    export default {
        components: {Lines},
        name: "monitor-process-chart",
        data() {
            return {
                components: {
                    Lines
                },
                chart: null,
                height: "100%",
                series: [
                    {
                        name: '审批正常',
                        type: 'line',
                        data: [],
                        markPoint: {
                            data: [
                                {type: 'max', name: 'Max'},
                                {type: 'min', name: 'Min'}
                            ]
                        },
                    },
                    {
                        name: '审批异常',
                        type: 'line',
                        data: [],
                        markPoint: {
                            data: [
                                {type: 'max', name: 'Max'},
                                {type: 'min', name: 'Min'}
                            ]
                        },
                    }
                ],
                text: '沈阳市业务监督统计',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                url: "/api/ac/subsistence/monitorService/monitorProcessChart",
                param: {
                    year: ""
                },
                Loading: false
            }
        },
        created() {
            var date = new Date();
            this.param.year = this.DateFormat(date, 'YYYY');
            //this.monitorProcessChart();
        },

        methods: {
            searchReset() {
                this.param = {};
                var date = new Date();
                this.param.year = this.DateFormat(date, 'YYYY');
                this.monitorProcessChart();
            },
            monitorProcessChart() {
                let that = this;
                that.Loading = true;
                let param = Object.assign({}, this.param);
                var year = this.DateFormat(that.param.year, 'YYYY')
                param.year = year;
                let url = this.url;
                postAction(url, param).then((res) => {
                    if (res.data.errcode != 0) {
                        this.$Message.error(res.data.errmsg);
                    } else {
                        that.series[0].data = res.data.data.normalData;
                        that.series[1].data = res.data.data.exceptionData;
                        this.text = year + "沈阳市业务监督统计";
                        that.$nextTick(() => {
                            that.$refs.lines.drawLine();
                        })
                    }
                }).finally(() => {
                    that.Loading = false;
                })
            },
        },
    }
</script>

<style scoped>
    #chart {
        height: calc(100% - 100px);
        position: relative;
        margin-top: 20px;
    }
</style>